<template>
    <!-- 书写html结构 -->
    <div>

        <van-cell title="选择单个日期" :value="date" @click="show = true" />

        <van-button type="primary">主要按钮</van-button>
        <van-button type="info">信息按钮</van-button>
        <van-button type="default">默认按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger">危险按钮</van-button>

        <van-calendar v-model="show" @confirm="onConfirm" />
        
        <van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="用户名"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
</van-form>

    </div>
</template>

<script>

//书写组件配置项目 相当于写js代码的地方
//要求template必须有且只有一个根元素，如果有两个就不知道绑定那个
export default { //export default 相当于过去的new vue ({el:"#div"})
    //全部都是json格式   
    
    props: {//注册属性，用来父子组件传递参数使用
        
    },
    data() { //定义数据的地方
        return {
            username: '',
      password: '',
      date: '',
      show: false,
         }
    },
    created() { //生命周期  创建后要做的事情  vue被创建时候执行的

    },
    mounted() { // 生命周期  挂载完成后

    },
    methods: { //  方法事件处理
        onSubmit(values) {
      console.log('submit', values);
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
    },
    components: { // 组件注册的地方 相当于pom文件
      
    }
}
</script>

<style>
/* 编写样式的 */
   
</style>